import React from 'react';
import classNames from 'classnames';
import styles from  './index.less';

export interface CardProps {
  list: Array<{label: string, value: any}>;
  style?: React.CSSProperties;
  className?: string;
}

const Board: React.SFC<CardProps> = (props) => {
  const {
    list,
    className,
    ...restProps
  } = props;
  const len = list.length;
  const classString = classNames(className);
  return (
    <ul className={`${styles['card-wrapper']} ${styles[classString]}`} {...restProps}>
      {
        list.map(item => (
          <li key={item.label} style={{ width: `${100/len}%`}}>
            <h5>{item.label}</h5>
            <div className={styles.value}>{item.value}</div>
          </li>
        ))
      }
    </ul>
  )
};

export default Board;
